@import "~scss/_mixins";

.blocks {
	.block.blockFeatured { 
		@include text-common; line-height: 28px; color: var(--color-text-secondary); padding: 0px 0px 24px 0px; white-space: nowrap; display: flex; 
	}
	.block.blockFeatured {
		.icon.checkbox { width: 20px; height: 20px; vertical-align: middle; margin-top: -4px; background-image: url('~img/icon/dataview/checkbox0.svg'); }
		.icon.checkbox.active { background-image: url('~img/icon/dataview/checkbox1.svg'); }

		.listColumn {
			.wrapMenu { display: none; }
		}

		.listInline { display: flex; flex-direction: row; align-items: center; gap: 0px 2px; flex-wrap: wrap; }
		.listInline {
			.bullet { width: 4px; height: 4px; border-radius: 50%; background: var(--color-text-secondary); }

			.cell { white-space: nowrap; display: inline-flex; flex-direction: row; align-items: center; gap: 0px 2px; min-height: 28px; }
			.cell.canEdit {
				.cellContent {
					.empty { display: inline; }
				}
			}
			.cell:last-child .bullet { display: none; }

			.cellContent { 
				height: 100% ;display: flex; border-radius: 4px; vertical-align: top; padding: 0px 6px; transition: background $transitionCommon; 
				cursor: default !important; 
			}
			.cellContent.disabled { opacity: 1; }

			.cellContent:not(.disabled):hover, .cellContent:not(.disabled).hover { background: var(--color-shape-highlight-medium); }
			.cellContent {
				.element { line-height: inherit; background: none !important; cursor: default !important; }
				.iconObject { display: none; margin: 0px; }
				.name { vertical-align: baseline; line-height: inherit; display: inline; word-break: break-word; white-space: normal; }

				.empty { vertical-align: top; }
				.flex { display: inline-flex; flex-direction: row; align-items: center; }

				.more { @include text-common; line-height: 18px; }
				.label { display: inline; vertical-align: middle; }
			}

			.cellContent.c-select {
				.over { 
					display: inline-flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0px 6px; vertical-align: middle; 
					margin-top: -2px;
				}
				.tagItem { margin: 0px; max-width: 400px; }
			}

			.cellContent.c-file {
				.over { display: inline-flex; flex-direction: row; align-items: center; gap: 0px 2px; height: 28px; }
				.element { flex-shrink: 0; display: flex; }
				.iconObject { display: block; }
				.name { display: none; }
				.empty { padding: 0px 4px; }
			}

			.cellContent.c-object {
				.over {
					display: inline-flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0px 6px; vertical-align: middle;
					margin-top: -2px;
				}
				.iconObject { flex-shrink: 0; margin: 0px 6px 0px 0px !important; }
			}

			.cellContent.c-select, 
			.cellContent.c-object, 
			.cellContent.c-file {
				.over { align-items: center; }
			}

			.cellContent.c-checkbox { display: inline-flex; flex-direction: row; align-items: center; height: 28px; gap: 0px 4px; }

			.cellContent.c-longText {
				.name { display: inline-block; vertical-align: top; max-width: 220px; @include text-overflow-nw; }
			}
		}
	}
	.block.blockFeatured > .wrapMenu:hover > .icon.dnd { opacity: 1; }

	.block.blockFeatured.align0 {
		> .wrapContent > .selectionTarget > .dropTarget > .wrap > .listInline { margin-left: -4px; }
	}

	.block.blockFeatured.align1 {
		.wrap > .listInline { justify-content: center; }
	}

	.block.blockFeatured.align2 {
		.wrap > .listInline { justify-content: flex-end; }
	}

	.block.blockFeatured.small { @include text-common; padding: 0px; margin: 0px; line-height: 22px; }
	.block.blockFeatured.small {
		.wrap > .listInline {
			.cellContent { padding: 2.5px 6px; }
			.more { margin-top: 1px; }
		}
	}
}

.editorWrapper.noSystemBlocks {
	.blocks .block.blockFeatured { display: none; }
}
